<script setup>

import {get, post} from "@/net";
import {reactive, ref} from "vue";
import {weatherStore} from "@/stores/weatherStore";
import {locationStore} from "@/stores/locationStore";
import {
    Drizzling,
    Location,
    MostlyCloudy,
    PartlyCloudy,
    Sunny,
    WindPower,
    Warning,
    CaretTop
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import {useStore} from "@/stores/userStore";

const store = useStore()
const weather_store = weatherStore()
const location_store = locationStore()
let userNum = ref(0)
let singerNum = ref(0)
let gameNum = ref(0)
let voteCount = ref(0)
const echartsRef1 = ref(null)
const echartsRef2 = ref(null)
const chartData1 = reactive([])
const chartData2 = reactive([])
const allGameVote = reactive([])
const allSingerVote = reactive([])

const form = reactive({
    city_id: '',
})

const active = ref(0);

const weather = () => {
    if (!location_store.api.location) {
        get('/api/location/get-location',
                (location) => {
                    location_store.api.location = location
                    form.city_id = location_store.api.location.adcode
                    getWeather()
                }
        )
    } else {
        getWeather()
    }
}

const getWeather = () => {
    if (!weather_store.api.weather) {
        post('/api/weather/cityId', {
            city_id: form.city_id
        }, (data) => {
            weather_store.api.weather = data
            active.value = 1
        })
    } else {
        active.value = 1
    }
}

const getData = () => {
    get('/api/user/all',
            (data) => {
                userNum.value = data.length
            }
    )
    get('/api/singer/all',
            (data) => {
                singerNum.value = data.length
            }
    )
    get('/api/game/all',
            (data) => {
                gameNum.value = data.length
            }
    )
    post('/api/vote/count-uid', {
            uid: store.auth.user.uid
        }, (data) => {
                voteCount.value = data
            }
    )
    get('/api/vote/count-all-game',
            (data) => {
                allGameVote.value = data
                chartData1.value = getChartData1()
            }
    )
    get('/api/vote/count-all-singer',
            (data) => {
                allSingerVote.value = data
                chartData2.value = getChartData2()
            }
    )
}

const getChartData1 = () => {
    const gameName = []
    const voteCount = []

    for (let i = 0; i < allGameVote.value.length; i++) {
        gameName.push(allGameVote.value[i].name)
        voteCount.push(allGameVote.value[i].count)
    }

    return {
        gameName,
        voteCount
    }
}

const getChartData2 = () => {
    const singerName = []
    const voteCount = []

    for (let i = 0; i < allSingerVote.value.length; i++) {
        singerName.push(allSingerVote.value[i].name)
        voteCount.push(allSingerVote.value[i].count)
    }

    return {
        singerName,
        voteCount
    }
}

const show = () => {
    const myChart1 = echarts.init(echartsRef1.value)
    const myChart2 = echarts.init(echartsRef2.value)
    myChart1.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: chartData1.value.gameName
        },
        series: [
            {
                name: '投票人数',
                data: chartData1.value.voteCount,
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: function(params) {
                        // 找到最大的数值及其索引
                        let maxCount = Math.max(...chartData1.value.voteCount)

                        // 如果当前数据索引等于最大数值的索引，则返回红色
                        return params.value === maxCount ? '#a90000' : '#6479af'
                    }
                }
            }
        ]
    })
    myChart2.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: chartData2.value.singerName
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '获得票数',
                data: chartData2.value.voteCount,
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: function(params) {
                        // 找到最大的数值及其索引
                        let maxCount = Math.max(...chartData2.value.voteCount)

                        // 如果当前数据索引等于最大数值的索引，则返回红色
                        return params.value === maxCount ? '#a90000' : '#6479af'
                    }
                }
            }
        ]
    })
}
setTimeout(show, 250)

const fetchData = () => {
    getData()

}

fetchData()
</script>

<template>
    <div>
        <div class="flex">
            <div style="display: flex;flex-direction: row">
                <el-card style="width: 919px;height: 130px;margin: 20px 20px 20px 60px;background-color: #e1eaf9" shadow="hover">
                    <div style="display: flex;flex-direction: row">
                        <img src="@/assets/header.svg" alt="header" style="width: 140px;">
                        <div style="display: flex;flex-direction: column;margin-left: 20px">
                            <span style="font-size: 20px;font-weight:bold;color: #8c9bf9;margin-bottom: 20px">
                                上午好，{{ store.auth.user.username }}！
                            </span>
                            <span>
                                开源等于互助；开源需要大家一起来支持，支持的方式有很多种，比如使用、推荐、写教程、保护生态、贡献代码、回答问题、分享经验、打赏赞助等；欢迎您加入我们！
                            </span>
                        </div>
                    </div>
                </el-card>
                <el-card style="width: 292px;height: 130px;margin: 20px 20px 20px 0;background-color: #e7ebf1;" shadow="hover">
                    <div style="display: flex;flex-direction: column;text-align: center">
                        <img src="@/assets/coffee.svg" alt="coffee" style="width: 80px;display: block;margin: auto">
                        <span>
                            您今天已在线
                        </span>
                    </div>
                </el-card>
            </div>
            <div style="display: flex;flex-direction: row">
                <el-card style="width: 292px;height: 130px;margin-left: 60px;background-color: #e7ebf1" shadow="hover">
                    <el-statistic :value="userNum">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                总注册用户
                                <el-tooltip
                                        effect="dark"
                                        content="每天新增用户统计"
                                        placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning/>
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比昨天</span>
                            <span class="green">24%
                                <el-icon>
                                    <CaretTop/>
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </el-card>
                <el-card style="width: 292px;height: 130px;margin-left: 20px;background-color: #e7ebf1" shadow="hover">
                    <el-statistic :value="singerNum">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                参与歌手数
                                <el-tooltip
                                        effect="dark"
                                        content="每天新增歌手统计"
                                        placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning/>
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比昨天</span>
                            <span class="green">8%
                                <el-icon>
                                    <CaretTop/>
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </el-card>
                <el-card style="width: 292px;height: 130px;margin-left: 20px;background-color: #e7ebf1" shadow="hover">
                    <el-statistic :value="gameNum">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                已举办比赛场次
                                <el-tooltip
                                        effect="dark"
                                        content="每天新增比赛统计"
                                        placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning/>
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比昨天</span>
                            <span class="green">11%
                                <el-icon>
                                    <CaretTop/>
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </el-card>
                <el-card style="width: 292px;height: 130px;margin-left: 20px;background-color: #e7ebf1" shadow="hover">
                    <el-statistic :value="voteCount">
                        <template #title>
                            <div style="display: inline-flex; align-items: center">
                                您投出的票数
                                <el-tooltip
                                        effect="dark"
                                        content="每天新增投票统计"
                                        placement="top"
                                >
                                    <el-icon style="margin-left: 4px" :size="12">
                                        <Warning/>
                                    </el-icon>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-statistic>
                    <div class="statistic-footer">
                        <div class="footer-item">
                            <span>比昨天</span>
                            <span class="green">12%
                                <el-icon>
                                    <CaretTop/>
                                </el-icon>
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
            <div style="display: flex;flex-direction: row">
                <el-card style="width: 606px;height: 350px;margin-left: 60px;margin-top: 20px;background-color: #e7ebf1" shadow="hover">
                    <div style="background-color: #7ee3f6; width: 10px;height: 30px;float: left"></div>
                    <span style="font-size: 18px;font-weight: bold;margin-left: 8px;line-height: 30px">最热门比赛</span>
                    <div class="chart" ref="echartsRef1" style="width: 100%;height: 300px;"></div>
                </el-card>
                <el-card style="width: 606px;height: 350px;margin-left: 20px;margin-top: 20px;background-color: #e7ebf1" shadow="hover">
                    <div style="background-color: #7ee3f6; width: 10px;height: 30px;float: left"></div>
                    <span style="font-size: 18px;font-weight: bold;margin-left: 8px;line-height: 30px">最受欢迎歌手</span>
                    <div class="chart" ref="echartsRef2" style="width: 100%;height: 300px;"></div>
                </el-card>
            </div>
        </div>
        <div id="weather">
            <div v-if="active===1">
                <table class="demo-border">
                    <tbody>
                    <tr>
                        <td class="text">
                            <el-icon>
                                <Location/>
                            </el-icon>
                            城市：
                        </td>
                        <td class="text" style="font-size: 20px">
                            {{ weather_store.api.weather.lives[0].city }}
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="line">
                            <div/>
                        </td>
                    </tr>
                    <tr>
                        <td class="text">今日天气：</td>
                        <td class="text">
                            <el-text tag="b">
                                {{ weather_store.api.weather.lives[0].weather }}
                                <el-icon
                                        v-if="weather_store.api.weather.lives[0].weather==='小雨'||weather_store.api.weather.lives[0].weather==='雨'">
                                    <Drizzling/>
                                </el-icon>
                                <el-icon v-if="weather_store.api.weather.lives[0].weather==='晴'">
                                    <Sunny/>
                                </el-icon>
                                <el-icon v-if="weather_store.api.weather.lives[0].weather==='阴'">
                                    <MostlyCloudy/>
                                </el-icon>
                                <el-icon v-if="weather_store.api.weather.lives[0].weather==='多云'">
                                    <PartlyCloudy/>
                                </el-icon>
                            </el-text>
                        </td>
                    </tr>
                    <tr>
                        <td class="text">今日温度：</td>
                        <td class="text">
                            <el-text tag="b">
                                {{ weather_store.api.weather.lives[0].temperature }}℃
                            </el-text>
                        </td>
                    </tr>
                    <tr>
                        <td class="text">当前风向：</td>
                        <td class="text">
                            <el-text tag="b">
                                {{ weather_store.api.weather.lives[0].winddirection }}
                                <el-icon>
                                    <WindPower/>
                                </el-icon>
                            </el-text>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<style scoped>
.demo-border .text {
    width: 15%;
}

.demo-border .line {
    width: 70%;
}

.demo-border .line div {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--el-border-color);
}

.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.green {
    color: var(--el-color-success);
}

.red {
    color: var(--el-color-error);
}
</style>